import {Component, createRef} from "react";
import "./css/wxIndex.scss"
import {Space, Input, Button} from "antd";
import {SendOutlined} from "@ant-design/icons";


class WxIndex extends Component{
    constructor(props) {
        super(props);
    }

    state = {
        num: 1,
        obj: {
        },
        message: '',
        messageList: [
            {a: 1, message: 'Hellow'},
            {a: 2, message: 'Hellow'},
            {a:2, message: 'moximoxi'},
            {a: 1, message: 'bug'}]
    }

    inputRef= createRef();
    addMessage = () => {
        let {messageList} = this.state
        let message = this.inputRef.current.input.value
        if(message){
            messageList.push({a:1, message});
            this.setState({
                message: ''
            });
            this.inputRef.current.input = '';
            this.forceUpdate()
        }
    }

    handleKeyDown = (e) => {
        if(e.keyCode == 13){
            this.addMessage()
        }
    }
    handleChange = (e) => {
        this.setState({
            message: e.target.value
        })
    }
    render() {
        let {message, messageList} = this.state;
        return (
            <div className='wxIndex'>
                <div className='mesageBox'>
                    {
                        messageList.map((v, i) => (
                            <div key={i} className={ v.a == '1' ? 'message messager' : 'message'}>
                                <div className='imgBox'>
                                    <img src={v.a=='1' ? './../src/static/img/me.jpg': './../src/static/img/avator.jpg'} alt=""/>
                                </div>
                                <div className='messageInfo'>
                                    <p>{v.message}</p>
                                </div>
                            </div>
                        ))
                        }
                </div>
                <Space.Compact className='sendBtn'>
                    <Input ref={this.inputRef}  value={message} placeholder='请输入发送内容' onChange={this.handleChange} onKeyDown={this.handleKeyDown} />
                    <Button type="primary" onClick={this.addMessage}>
                        <SendOutlined />
                    </Button>
                </Space.Compact>
            </div>
        )
    }
}

export default WxIndex;